<template>
  <Popup v-model="show" position="bottom">
    <Picker
      show-toolbar
      :value-key="dataValueKey"
      :loading="isLoading"
      :columns="dataRes"
      @confirm="onConfirmClick"
      @cancel="onCancelClick"
    />
  </Popup>
</template>

<script>
import Popup from '@/widgets/Popup'
import Picker from '@/widgets/Picker'
import { resTol } from '@/tools/public'

export default {
  name: 'DataPickerCpt',
  components: {
    Popup,
    Picker
  },
  props: {
    valueKey: {
      type: [String]
    },
    request: {
      type: [Object, Function]
    },
    requestParameter: {
      type: [Object],
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      show: false,
      isLoading: false,
      dataRes: [],
      dataValueKey: this.valueKey,
      dataRequest: this.request,
      dataRequestParameter: this.requestParameter
    }
  },
  methods: {
    showView(valueKey, request, requestParameter) {
      if (valueKey) {
        this.dataValueKey = valueKey
      }
      if (request) {
        this.dataRequest = request
      }
      if (requestParameter) {
        this.dataRequestParameter = requestParameter
      }
      this.show = true
      this.isLoading = true
      resTol.initReqResCb(
        this.dataRes,
        this.dataRequest,
        this.dataRequestParameter,
        res => {
          this.dataRes = res
          this.isLoading = false
        }
      )
    },
    onConfirmClick(val) {
      this.$emit('onSelectedChange', val, this.dataValueKey)
      this.show = false
    },
    onCancelClick() {
      this.show = false
    }
  }
}
</script>
